<script setup lang="ts">
import {useIndexStore, useUserStore} from "~/store";
import PcDialogAddUser from "~/Components/pc/main/pc-dialog-addUser.vue";
import PcDialogAddGroup from "~/Components/pc/main/pc-dialog-addGroup.vue";

const indexStore = useIndexStore()
</script>

<template>
  <div class="p-5 h-100%">
    <div v-if="!indexStore.search">
      搜索建议
      <div class="p-2 *:m-2">
        <el-button>@我</el-button>
        <el-button>特别关心</el-button>
      </div>
    </div>
    <div v-else>
      <div v-if="indexStore.search_user.length > 0">
        <div class="p-2 text-xl">用户</div>
        <div class="w-full flex *:flex-1">
          <div class="flex" v-for="user in indexStore.search_user">
            <el-avatar :size="50" src="/cover.jpg"/>
            <div class="flex *:w-full flex-wrap ml-2 text-[12px] items-center">
              <div>{{ user.name }}</div>
              <div>{{ user.account }}</div>
            </div>
            <div class="flex justify-center items-center">
              <pc-dialog-add-user :add_user="user"/>
            </div>
          </div>
        </div>
      </div>
      <div v-if="indexStore.search_group.length > 0">
        <div class="p-2 text-xl">群聊</div>
        <div class="w-full flex *:flex-1">
          <div class="flex" v-for="group in indexStore.search_group">
            <el-avatar :size="50" :src="group.avater"/>
            <div class="flex *:w-full flex-wrap ml-2 text-[12px] items-center">
              <div>{{ group.name }}</div>
              <div>{{ group.account }}</div>
            </div>
            <div class="m-0 flex justify-center items-center">
              <pc-dialog-add-group :add_group="group"/>
            </div>
          </div>
        </div>
      </div>
      <el-empty v-else image-size="150" description="换个关键词试试？" />
    </div>
  </div>
</template>

<style scoped>

</style>